<template>
  <div class="d-flex flex-column align-items-center justify-content-between">
    <router-link :to="'/detail/' + item.id"
      ><img
        class="mr-2"
        style="width: 100%; cursor: pointer"
        :src="item.imgUrl"
        alt=""
    /></router-link>
    <router-link :to="'/detail/' + item.id">{{ item.title }}</router-link>
    <div class="d-flex">
      <span>￥{{ realPrice(item) }}</span>
      <span style="color: grey; font-size: 12px; margin-top: 5px"
        >&nbsp; <del>{{ parseFloat(item.price).toFixed(2) }}</del></span
      >
    </div>
  </div>
</template>
<script>
export default {
  props: ["item"],
  methods: {
    realPrice(item) {
      return parseFloat(item.price * item.discount).toFixed(2);
    },
  },
};
</script>
